<template>
  <div class="back-navigation">
    <p @click="goBack" ref="left">{{ titleInfo.leftTitle }}</p>
    <p ref="centerabc">{{ titleInfo.title }}</p>
    <p ref="right">{{ titleInfo.rightTitle }}</p>
  </div>
</template>

<script>
  export default {
    name: 'navigation',
    props: {
      titleInfo: {
        type: Object,
        leftTitle: {
          type: String,
          default: '返回'
        },
        title: {
          type: String,
          default: '标题'
        },
        rightTitle: {
          type: String,
          default: ''
        }
      }
    },
    computed: {
//      getTitleWidth() {
//        let width = document.body.clientWidth
//        let leftWidth = this.$refs.left.offsetWidth
//        let rightWidth = this.$refs.right.offsetWidth
//        let centerWidth = width - leftWidth - rightWidth - 30
//        return centerWidth
//      }
    },
    methods: {
      goBack() {
        document.body.style.backgroundColor = 'white'
        this.$indicator.close()
        console.log(this.$route.path)
        if ((this.$route.path === '/pay_result')) {
          this.$router.go(-3)
        } else if (this.$route.path === '/appraise_sucess') {
          this.$router.go(-2)
        } else {
//        this.$router.go(-1)
          this.$router.back()
        }
      }
    },
    mounted () {
      let width = document.body.clientWidth
      let leftWidth = this.$refs.left.offsetWidth
      let rightWidth = this.$refs.right.offsetWidth > 20 ? this.$refs.right.offsetWidth : leftWidth
//      let rightWidth = this.$refs.right.offsetWidth
//      console.log('rightWidth:' + rightWidth)
//      console.log('leftWidth:' + leftWidth)
      let centerWidth = width - leftWidth - rightWidth - 30
      this.$refs.centerabc.style.width = centerWidth + 'px'
    }
  }
</script>

<style lang="scss">

  div.back-navigation {
    top: 0;
    width: 100%;
    height: 44px;
    position: fixed;
    /*border-color: rbg(233, 233, 233);*/
    border-color: lightgray;
    border-style: solid;
    /*border: 0 solid lightgray;*/
    border-width: 0 0 0.5px 0;
    z-index: 6;
    margin: auto;
    /*background-color: rgb(243, 243, 243);*/
    background-color: white;

    >p:first-child {
      float: left;
      padding: 0 10px 0 10px;
      width: auto;
      margin-left: 15px;
      height: 43px;
      line-height: 43px;
      font-size: 12px;
      color: rgb(133, 133, 133);
      text-align: left;
      /*background-color: blanchedalmond;*/
    }

    >p:nth-child(2) {
      float: left;
      color: rgb(66, 66, 66);
      font-size: 16px;
      height: 43px;
      line-height: 43px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      /*background-color: green;*/
    }

    >p:last-child {
      margin-right: 15px;
      padding: 0 10px 0 10px;
      width: auto;
      float: right;
      height: 43px;
      line-height: 43px;
      font-size: 12px;
      color: rgb(133, 133, 133);
      text-align: right;
      /*background-color: red;*/
    }
  }
</style>
